import { createApp } from 'vue'
import Login from './Login.vue';
import Password from './Password.vue';
import Phone from './Phone.vue';
// import { detectingNodes } from '@/content-scripts/detectingNodes.js'
export function createLoginUsername() {
    // console.log('Second App mounted');
    // detectingNodes()
    createUsernameInput()
    createPwdInput()
}
export function createLoginPhone() {
    // console.log('Second App mounted');
    // detectingNodes()
    createPhoneInput()
    createPwdInput()

}

function createUsernameInput() {
    const container = document.querySelector('.generic-id-input-container')
    // document.querySelector('input.mantine-17boe6b[placeholder="邮箱/用户名"]')||document.querySelector(
    //     '.login-email-input-container'
    // )
    if (!container) return;

    if (container.querySelector(".my-login-overlay")) {
        container.querySelector(".my-login-overlay").style.display = "block";
        return;
    }
    const overlay = document.createElement('div');

    overlay.setAttribute('class', 'my-login-overlay');

    overlay.setAttribute('style', 'position: absolute;\n' +
        ' left: 0px;\n' +
        ' top: 0px;\n' +
        ' width: 100%;\n' +
        ' z-index: 1;\n' +
        'display: block;\n' +
        ' height: 100%;');

    const appContainer = document.createElement('div');

    const app = createApp(Login);

    app.mount(appContainer);

    container.style.position = 'relative';

    overlay.appendChild(appContainer);

    container.appendChild(overlay);
}
function createPwdInput() {

    const pwdContainer = document.querySelector('.lfziKA > div > div') || document.querySelector('.login-password-input-container')
    if (!pwdContainer) return
    if (pwdContainer.querySelector('.my-login-pwd-overlay')) return
    // const newUsernameInput = `
    // <input type="text" id="my-login-username" name="username" autocomplete="username"
    //                 placeholder="请输入邮箱/用户名" v-model="formData.username" required>
    // `

    const pwdOverlay = document.createElement('div');

    pwdOverlay.setAttribute('class', 'my-login-pwd-overlay');


    pwdOverlay.setAttribute('style', 'position: absolute;\n' +
        ' left: 0px;\n' +
        ' top: 0px;\n' +
        ' width: 100%;\n' +
        ' height: 100%;');

    const pwdAppContainer = document.createElement('div');
    const pwdApp = createApp(Password);

    pwdApp.mount(pwdAppContainer)

    pwdContainer.style.position = 'relative';

    pwdOverlay.appendChild(pwdAppContainer);

    pwdContainer.appendChild(pwdOverlay);
}
function createPhoneInput() {
    const phoneContainer = document.querySelector('.generic-id-input-container > div > div > label > .mantine-Input-wrapper')
    const container = document.querySelector('.my-login-overlay')
    if (!phoneContainer) return
    if (phoneContainer.querySelector('.my-login-phone-overlay')) {
        if (container) {
            container.style.display = 'none'
        }
        return;
    }

    const phoneOverlay = document.createElement('div');

    phoneOverlay.setAttribute('class', 'my-login-phone-overlay');


    phoneOverlay.setAttribute('style', 'position: absolute;\n' +
        ' left: 0px;\n' +
        ' top: 0px;\n' +
        ' width: 100%;\n' +
        ' height: 100%;');

    const phoneAppContainer = document.createElement('div');

    const phoneApp = createApp(Phone);

    phoneApp.mount(phoneAppContainer)

    phoneContainer.style.position = 'relative';

    phoneOverlay.appendChild(phoneAppContainer);

    phoneContainer.appendChild(phoneOverlay);
}